<template>
  <div class="app-container">
    <div style="font-size: 20px;margin: 0px 20px 10px 20px">{{ line_name }}</div>
    <el-steps :active="currentStep" finish-status="success" style="width:70%">
      <el-step title="基础信息" description="这是一段很长很长很长的描述性文字" />
      <el-step title="站点信息" description="这是一段很长很长很长的描述性文字" />
      <el-step title="班次信息" description="流水班只需添加一个截止班次" />
      <el-step title="运营信息" description="比较短" />
    </el-steps>
    <div v-if="currentStep==0" style="display:flex;margin-left: 30%;margin-top:50px">
      <div style="">
        <el-form ref="form" label-width="80px">
          <el-form-item label="线路公司">
            <el-select v-model="form.company" placeholder="请选择线路公司" @change="companySelect">
              <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="线路编号">
            <el-input v-model="form.line_sn" placeholder="请填写线路编号" type="text" />
          </el-form-item>
          <el-form-item label="线路类型">
            <el-select v-model="form.line_type" placeholder="请选择线路类型">
              <el-option v-for="item in lineTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="班次类型">
            <el-select v-model="form.ls_type" placeholder="请选择班次类型">
              <el-option v-for="item in lsTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否拼团">
            <el-select v-model="form.is_booking" placeholder="请选择">
              <el-option v-for="item in bookingList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="座位类型">
            <el-select v-model="form.seat_type" placeholder="请选择">
              <el-option v-for="item in seatTypeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="售卖周期">
            <el-select v-model="form.sale_cycle" multiple placeholder="请选择">
              <el-option v-for="item in cycleList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="最低发车人数(预约必填)">
            <el-input-number v-model="form.least_num" size="mini" :min="1" />
          </el-form-item>
        </el-form>
        <div span="8" offset="3">
          <el-button @click="quxiao">取消</el-button>
          <el-button type="primary" style="margin-right: 10px" @click="submitBasic">保存修改</el-button>
          <el-button @click="next">下一步</el-button>
        </div>
      </div>
    </div>
    <div v-show="currentStep==1">
      <div style="margin-top:40px">
        <div id="container" style="height:500px" tabindex="0" />
        <div style="position: absolute;z-index: 100;width: 110px;float: right;margin:90px 50px 0 0" class="info">
          <div class="input-item">
            <div class="input-item-prepend">
              <span class="input-item-text" style="width:8rem;">请输入关键字</span>
            </div>
            <input id="tipinput" type="text">
          </div>
        </div>
      </div>

      <div v-if="polistList.length>0" draggable="true" style="display: flex; overflow-x: scroll;">
        <!--<p>{{busStop[0]['name']}}</p>-->
        <!--        <p>{{busStop.length}}</p>-->
        <div title="点击添加站点" style="cursor: pointer; width: 70px; height: 70px; flex-shrink: 0;" />
        <template v-for="(item,key) in polistList">

          <!--            起点-->
          <div v-if="key==0" draggable="true" style="width: 120px; margin: 10px 0px; flex-shrink: 0;">
            <div title="点击添加站点" style="cursor: pointer; display: flex; height: 20px; margin: 5px 0px;">
              <div>
                <img src="https://qiniu.shulan95.com/shanchu.png" style="width: 20px; height: 20px;" @click="arrDelete(key)">
                <img src="https://qiniu.shulan95.com/hou.png" @click="arrDown(key)">
              </div>
              <div style="height: 20px; border-top: 2px solid rgb(191, 191, 191); margin-top: 8px; flex: 1 1 0%;" />
            </div>
            <p class="stationsListItem" style="text-align:center;width: 70px; color: rgb(0, 0, 0); font-size: 13px; font-weight: 500;">
              {{ item.name }}
            </p>
          </div>
          <!--            终点-->
          <div v-if="key==(polistList.length-1)" data-index="11" draggable="true" style="width: 70px; margin: 10px 0px; flex-shrink: 0;">
            <div title="点击添加站点" style="cursor: pointer; display: flex; height: 20px; margin: 5px 0px;">
              <div>
                <img src="https://qiniu.shulan95.com/qian.png" @click="arrUp(key)">
                <img src="https://qiniu.shulan95.com/shanchu.png" style="width: 20px; height: 20px;" @click="arrDelete(key)">
              </div>
            </div>
            <p class="stationsListItem" style="text-align:center;width: 70px; color: rgb(0, 0, 0); font-size: 13px; font-weight: 500;">
              {{ item.name }}
            </p>
          </div>
          <!--            途经点-->
          <div v-if="0<key&&key<(polistList.length-1)" data-index="1" draggable="true" style="width: 120px; margin: 10px 0px; flex-shrink: 0;">
            <div title="点击添加站点" style="cursor: pointer; display: flex; height: 20px; margin: 5px 0px;">
              <div>
                <img src="https://qiniu.shulan95.com/qian.png" @click="arrUp(key)">
                <img src="https://qiniu.shulan95.com/shanchu.png" style="width: 20px; height: 20px;" @click="arrDelete(key)">
                <img src="https://qiniu.shulan95.com/hou.png" @click="arrDown(key)">
              </div>
              <div style="height: 20px; border-top: 2px solid rgb(191, 191, 191); margin-top: 8px; flex: 1 1 0%;" />
            </div>
            <p class="stationsListItem" style="text-align:center;width: 70px; color: rgb(0, 0, 0); font-size: 13px; font-weight: 500;">
              {{ item.name }}
            </p>
          </div>
        </template>
      </div>
      <div v-else style="margin-left: 30px">
        <div data-index="4" draggable="true" style="width: 120px; margin: 10px 0px; flex-shrink: 0;">
          <div title="点击添加站点" style="cursor: pointer; display: flex; height: 20px; margin: 5px 20px;">
            <img src="" style="width: 20px; height: 20px;">
            <!-- <div style="height: 20px; border-top: 2px solid rgb(191, 191, 191); margin-top: 8px; flex: 1 1 0%;">
                                     </div>-->
          </div>
          <p style="width: 70px; font-size: 13px;">
            请在地图上选择站点</p>
        </div>
      </div>
      <div class="ant-row-flex ant-row-flex-middle" style="padding: 30px 40px;">
        <el-col :span="12">
          <h3 style="flex: 1 1 0%;">线路总长：{{ distance }}KM</h3>
        </el-col>
        <el-col :span="12">
          <el-button @click="pre">上一步</el-button>
          <el-button style="margin: 0 10px 0 10px" type="primary" @click="save_points()">保存线路</el-button>
          <el-button @click="next">下一步</el-button>
        </el-col>
        <el-col :span="6" />
      </div>

    </div>
    <div v-if="currentStep==2" style="margin-top:40px;">

      <el-button type="primary" style="margin: 0 0 10px 10px" icon="el-icon-plus" @click="add_regualr = true">{{ form.ls_type==1?'添加班次':'添加截止班次' }}</el-button>
      <el-table
        :data="regularList"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          width="180"
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="班次线路时间"
          width="240"
        >
          <template slot-scope="scope">
            <div v-for="(item,i) in scope.row.regular_info" :key="i" style="display: flex; margin: 20px 0 20px ">
              <div style="width: 40%; text-align: left"><p>{{ i+1 }}、{{ item.name }}</p></div>
              <div style="width: 60%">{{ item.r_time }}</div>
              <div /></div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="180"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.status==1">上线</p>
            <p v-else>下线</p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.status==1">
              <el-button style="margin-right: 10px;margin-right: 5px" type="info" size="small" @click="edit_regular(scope.row)">编辑</el-button>

              <el-button type="primary" size="small" style="margin-right: 5px" @click="delete_regular(scope.row.id)">下线</el-button>
            </div>
            <p v-else>---</p>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding: 30px 40px; text-align: center;">
        <el-button @click="pre">上一步</el-button>
        <el-button type="primary" @click="next">下一步</el-button>
      </div>
    </div>
    <div v-if="currentStep==3" style="margin-top:40px;margin-left: 30%;">
      <el-form ref="formYun" :model="formYun" label-width="100px">

        <el-form-item label="预售天数">
          <el-input-number v-model="formYun.yu_sale" size="mini" :min="1" :max="y_max" />
        </el-form-item>

        <el-form-item label="原价">
          <el-input-number v-model="formYun.y_price" size="mini" :min="0.01" :precision="2" :step="0.1" />
        </el-form-item>

        <el-form-item label="优惠价">
          <el-input-number v-model="formYun.price" size="mini" :min="0.01" :precision="2" :step="0.1" />
        </el-form-item>
        <el-form-item label="首班车时间">
          <el-time-picker
            v-model="formYun.start_time"
            placeholder="任意时间点"
            value-format="HH:mm"
          />
        </el-form-item>
        <el-form-item label="末班车时间">
          <el-time-picker
            v-model="formYun.end_time"
            placeholder="任意时间点"
            value-format="HH:mm"
          />
        </el-form-item>
        <el-form-item>
          <div style="padding: 30px 40px;margin-left: 30%;">
            <el-button @click="pre">上一步</el-button>
            <el-button type="primary" @click="saveYu">保存</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      :visible="add_point"
      title="添加/设置站点"
      ok-text="保存"
      width="400px"
      top="50px"
      :before-close="handelClose1"
    >
      <el-form :model="pointform">
        <el-form-item label="站点名称">
          <el-input v-model="pointform.name" placeholder="请输入站点名称" />
        </el-form-item>

        <el-form-item label="上下车站">
          <el-select v-model="pointform.type">
            <el-option v-for="item in pointTypeList" :key="item.value" :value="item.value" :label="item.label">{{ item.label }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="到达下一站所需时间(分钟)">
          <el-input v-model="pointform.hastime" placeholder="请输入所需时间" />
        </el-form-item>
        <el-form-item label="经度" prop="lng">
          <p v-if="pointform.lng">{{ pointform.lng }}</p>
        </el-form-item>
        <el-form-item label="纬度" prop="lat">
          <p v-if="pointform.lat">{{ pointform.lat }}</p>
        </el-form-item>

        <el-form-item label="介绍">
          <el-input v-model="pointform.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..." />
        </el-form-item>
        <el-form-item style="margin-left:40%">
          <el-button type="primary" @click="add_po()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      :visible="add_regualr"
      title="选择时间"
      :before-close="handelClose"
    >
      <span>{{ form.ls_type==1?'首站发车时间：':'几点前有效' }}</span>
      <el-time-picker
        v-model="r_time"
        placeholder="任意时间点"
        value-format="HH:mm"
      />
      <el-button style="margin-left: 10px" type="primary" @click="add_re()">提交</el-button>

    </el-dialog>

  </div>
</template>

<script>
import { saveLine, savePoints, company_list, get_line_info, get_regular_info, add_regular, delete_regular, save_start_end, save_yun } from '@/api/ctm_bus'
export default {
  data() {
    return {
      id: '',
      currentStep: 0,
      map: {},
      y_max: 30,
      is_step1: false,
      is_step2: false,
      is_step3: false,
      cityList: [
        {
          value: '贵阳市',
          label: '贵阳市'
        }, {
          value: '遵义市',
          label: '遵义市'
        }
      ],
      companyList: [

      ],
      lineTypeList: [
        {
          value: 1,
          label: '通勤'
        },
        {
          value: 2,
          label: '政策'
        },
        {
          value: 3,
          label: '企业'
        },
        {
          value: 4,
          label: '景区'
        },
        {
          value: 5,
          label: '校园'
        },
        {
          value: 6,
          label: '高特快车'
        },
        {
          value: 7,
          label: '高品质公交'
        }

      ],
      lsTypeList: [
        {
          value: 1,
          label: '固定班'
        },
        {
          value: 2,
          label: '流水班'
        },
        {
          value: 3,
          label: '预约班'
        }

      ],
      bookingList: [
        {
          value: 1,
          label: '否'
        },
        {
          value: 2,
          label: '是'
        }

      ],
      seatTypeList: [
        {
          value: 1,
          label: '一人一座'
        },
        {
          value: 2,
          label: '不限座'
        }

      ],
      cycleList: [
        {
          value: 0,
          label: '周日'
        },
        {
          value: 1,
          label: '周一'
        },
        {
          value: 2,
          label: '周二'
        },
        {
          value: 3,
          label: '周三'
        },
        {
          value: 4,
          label: '周四'
        },
        {
          value: 5,
          label: '周五'
        },
        {
          value: 6,
          label: '周六'
        }
      ],
      form: {
        line_city: '',
        company: '',
        company_id: '',
        line_sn: '',
        line_type: '',
        ls_type: '',
        is_booking: '',
        seat_type: '',
        sale_cycle: [],
        least_num: 1
      },
      add_point: false,
      uploadList: [],
      pointTypeList: [
        {
          value: 1,
          label: '上车点'
        },
        {
          value: 2,
          label: '下车点'
        },
        {
          value: 3,
          label: '可上下'
        }

      ],
      pointform: {
        id: '',
        name: '',
        type: 0,
        hastime: '',
        lng: '',
        lat: '',
        desc: '',
        imageList: [
        ]
      },
      polistList: [],
      markerAll: [],
      distance: 0,
      line_name: '',
      regularList: [],
      add_regualr: false,
      r_time: '',
      e_regular_id: 0,
      formYun: {
        yu_sale: '',
        y_price: '',
        price: '',
        satrt_time: '',
        end_time: '',
        j_time: ''
      }

    }
  },
  created() {
    this.$route.params.id ? this.id = this.$route.params.id : this.id = ''
  },
  mounted() {
    this.initData()
    this.loadCityList()
  },
  methods: {
    initData() {
      this.map = new AMap.Map('container', {
        resizeEnable: true,
        center: [106.6741670, 26.6187110],
        zoom: 13
      })
      window.map = this.map
      const that = this
      this.map.on('click', function(ev) {
        console.log(ev)

        that.add_point = true
        that.pointform.lng = ev.lnglat.lng
        that.pointform.lat = ev.lnglat.lat
        // // 触发事件的对象
        // var target = ev.target;
        //
        // // 触发事件的地理坐标，AMap.LngLat 类型
        // var lnglat = ev.lnglat;
        //
        // // 触发事件的像素坐标，AMap.Pixel 类型
        // var pixel = ev.pixel;
        //
        // // 触发事件类型
        // var type = ev.type;
      })

      AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
        var poiPicker = new PoiPicker({
          // city:'北京',
          input: 'tipinput'
        })

        // 初始化poiPicker
        poiPickerReady(poiPicker)
      })

      function poiPickerReady(poiPicker) {
        window.poiPicker = poiPicker

        var marker = new AMap.Marker()

        var infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -20)
        })

        // 选取了某个POI
        poiPicker.on('poiPicked', function(poiResult) {
          console.log(poiResult)
          var source = poiResult.source
          var poi = poiResult.item
          var info = {
            source: source,
            id: poi.id,
            name: poi.name,
            location: poi.location.toString(),
            address: poi.address
          }

          marker.setMap(window.map)
          infoWindow.setMap(window.map)

          marker.setPosition(poi.location)
          infoWindow.setPosition(poi.location)

          infoWindow.setContent('POI信息: <pre>' + JSON.stringify(info, null, 2) + '</pre>')
          infoWindow.open(window.map, marker.getPosition())

          // map.setCenter(marker.getPosition());
        })

        poiPicker.onCityReady(function() {
          poiPicker.suggest('美食')
        })
      }
      // 加载班次基本信息
      if (!that.id) return
      if (that.currentStep == 0) {
        get_line_info({ id: that.id }).then(res => {
          if (res.code === 200) {
            const data = res.data
            that.form = {
              line_city: data.line_city,
              company: data.company,
              line_sn: data.line_sn,
              line_type: data.line_type,
              ls_type: data.ls_type,
              is_booking: data.is_booking,
              seat_type: data.seat_type,
              sale_cycle: data.sale_cycle
            }
            that.formYun = {
              yu_sale: data.yu_sale,
              y_price: data.y_price,
              price: data.price,
              start_time: data.start_time,
              end_time: data.end_time
            }

            that.polistList = data.points

            that.is_step1 = true
            console.log(that.polistList)
            if (that.polistList.length) {
              that.drawLine(that.polistList)
              that.is_step2 = true
              that.line_name = data.name
            }
          } else {
            this.$message({ showClose: true, message: res.msg, type: 'error' })
          }
        }).catch(error => {
          this.$message({ showClose: true, message: error, type: 'error' })
        })
      }
    },

    loadCityList(query) {
      company_list().then(res => {
        if (res.code !== 200) return this.$message.error(res.msg)
        this.companyList = res.data
      })
    },
    companySelect(item) {
      this.companyList.forEach(element => {
        if (element.id === item) {
          this.form.line_city = element.city_name
          this.form.company_id = element.id
        }
      })
    },
    // 基础信息提交
    submitBasic: function() {
      var that = this
      // if (!that.form.line_city) return this.$message({ showClose: true, message: '请选择线路城市', type: 'error' })
      if (!that.form.company) return this.$message({ showClose: true, message: '请选择线路公司', type: 'error' })
      if (!that.form.line_sn) return this.$message({ showClose: true, message: '请选择线路编号', type: 'error' })
      if (!that.form.line_type) return this.$message({ showClose: true, message: '请选择线路类型', type: 'error' })
      if (!that.form.ls_type) return this.$message({ showClose: true, message: '请选择班次类型', type: 'error' })
      if (!that.form.is_booking) return this.$message({ showClose: true, message: '请选择是否拼团', type: 'error' })
      if (!that.form.seat_type) return this.$message({ showClose: true, message: '请选择座位类型', type: 'error' })
      if (!that.form.sale_cycle.length) return this.$message({ showClose: true, message: '请选择售卖周期', type: 'error' })
      that.form.id = that.id
      saveLine(that.form).then(res => {
        console.log(res)
        if (res.data.id && res.code === 200) {
          that.id = res.data.id
          that.is_step1 = true
          this.$message({ showClose: true, message: res.msg, type: 'success' })
        } else {
          this.$message({ showClose: true, message: res.msg, type: 'error' })
        }
      }).catch(error => {
        this.$message({ showClose: true, message: error.msg, type: 'error' })
      })
    },

    save_points: function() {
      var _vm = this

      console.log(this.polistList)
      if (this.polistList.length <= 1) {
        this.$message({
          message: '请至少添加两个线路站点',
          type: 'warning'
        })
      } else {
        var data = {
          id: _vm.id,
          bus_stop: _vm.polistList,
          distance: _vm.distance
        }
        savePoints(data).then(res => {
          console.log(res.code)
          if (res.code == 200) {
            _vm.line_name = res.data

            _vm.$message({ showClose: true, message: res.msg, type: 'success' })
            _vm.is_step2 = true
          } else {
            this.$message({ showClose: true, message: res.msg, type: 'error' })
          }
        }).catch(error => { this.$message({ showClose: true, message: error, type: 'error' }) })
      }
    },
    // 添加班次
    add_re: function() {
      var _vm = this
      if (_vm.form.ls_type === 2 && _vm.regularList.length === 1) return this.$message({ showClose: true, message: '流水班只能添加一个截止班次', type: 'error' })

      if (!this.r_time) return this.$message({ showClose: true, message: '请先选择首班车时间', type: 'error' })

      var data = {
        id: _vm.id,
        regular_id: _vm.e_regular_id,
        time: _vm.r_time
      }
      add_regular(data).then(res => {
        console.log(res.code)
        if (res.code == 200) {
          this.$message({ showClose: true, message: '成功', type: 'success' })
          _vm.get_regular_info()
          _vm.add_regualr = false
          _vm.is_step3 = true
        } else {
          _vm.add_regualr = false
          this.$message({ showClose: true, message: res.msg, type: 'error' })
        }
      }).catch(error => {
        _vm.add_regualr = false
        this.$message({ showClose: true, message: error, type: 'error' })
      })
    },
    // 保存首末班
    save_start_end: function() {
      var _vm = this
      if (!this.formYun.start_time) return this.$message({ showClose: true, message: '请选择首班车时间', type: 'error' })
      if (!this.formYun.end_time) return this.$message({ showClose: true, message: '请选择末班车时间', type: 'error' })
      if (!this.formYun.j_time) return this.$message({ showClose: true, message: '请选择有效时间', type: 'error' })

      _vm.formYun.id = _vm.id
      save_start_end(_vm.formYun).then(res => {
        console.log(res.code)
        if (res.code === 200) {
          _vm.is_step3 = true
          this.$message({ showClose: true, message: res.msg, type: 'success' })
        } else {
          this.$message({ showClose: true, message: res.msg, type: 'error' })
        }
      }).catch(error => {
        this.$message({ showClose: true, message: error, type: 'error' })
      })
    },
    // 保存运营信息
    saveYu: function() {
      var _vm = this
      if (this.formYun.yu_sale > 30) return this.$message({ showClose: true, message: '请输入正确的预售天数', type: 'error' })
      if (!this.formYun.start_time) return this.$message({ showClose: true, message: '请选择首班车时间', type: 'error' })
      if (!this.formYun.end_time) return this.$message({ showClose: true, message: '请选择末班车时间', type: 'error' })

      _vm.formYun.id = _vm.id
      save_yun(_vm.formYun).then(res => {
        console.log(res.code)
        if (res.code == 200) {
          this.$message({ showClose: true, message: res.msg, type: 'success' })
          setTimeout(() => {
            history.back(-1)
          }, 1000)
        } else {
          this.$message({ showClose: true, message: res.msg, type: 'error' })
        }
      }).catch(error => {
        this.$message({ showClose: true, message: error, type: 'error' })
      })
    },
    // 编辑班次
    edit_regular: function(e) {
      this.r_time = e.regular_info[0].r_time
      this.e_regular_id = e.id
      this.add_regualr = true
    },
    // 下线班次
    delete_regular: function(e) {
      var _vm = this
      delete_regular({ id: e }).then(res => {
        if (res.code == 200) {
          _vm.line_name = res.data
          this.$message({ showClose: true, message: res.msg, type: 'error' })
          _vm.get_regular_info()
        } else {
          this.$message({ showClose: true, message: res.msg, type: 'error' })
        }
      }).catch(error => { this.$message({ showClose: true, message: error, type: 'error' }) })
    },

    // 增加站点
    add_po: function(name) {
      var that = this

      // setTimeout(function (res) {
      if (!that.pointform.name) return this.$message({ showClose: true, message: '请填写站点名称', type: 'error' })
      if (!that.pointform.type) return this.$message({ showClose: true, message: '请选择站点类型', type: 'error' })
      if (!that.pointform.hastime) return this.$message({ showClose: true, message: '请填写到达下一站时间', type: 'error' })
      that.add_point = false

      // var data = that.pointform
      // that.polistList.push(data);

      that.a = Object.assign({}, that.a, that.pointform)

      that.polistList.push(that.a)
      that.pointform = {
        name: '',
        type: 0,
        hastime: '',
        lng: '',
        lat: '',
        desc: '',
        imageList: []
      }
      console.log(that.polistList)
      that.$message('提交成功')
      this.map.clearMap()
      that.drawLine(that.polistList)
      // // that.$refs[name].resetFields();

      // }, 1250);
    },
    // 交换站点
    swapItems: function(arr, index1, index2, direction) {
      /* if(direction=='up') {//置顶
                        arr.unshift(arr[index1]);
                        arr.splice(index1 + 1, 1);
                        return arr;
                    }else if(direction=='down'){//置底
                        arr.push(arr[index1]);
                        arr.splice(index1,1);
                        return arr;
                    } else {
                        console.log(234234)
                    }*/
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    // 站点上衣
    upTr: function(myAppList, index) { // 上移
      var _vm = this
      if (index === 0) {
        return
      }
      _vm.swapItems(myAppList, index, index - 1)
    },
    // 站点下移
    downTr: function(myAppList, index) { // 下移
      var _vm = this
      if (index === myAppList.length - 1) {
        return
      }
      _vm.swapItems(myAppList, index, index + 1)
    },
    //
    arrUp: function(index) {
      var _vm = this
      _vm.upTr(_vm.polistList, index)
      this.map.clearMap()
      _vm.drawLine(_vm.polistList)
    },
    arrDown: function(index) {
      var _vm = this
      _vm.downTr(_vm.polistList, index)
      this.map.clearMap()
      _vm.drawLine(_vm.polistList)
    },

    // 删除站点
    arrDelete: function(index) {
      var _vm = this
      this.$confirm('你确定删除站点吗！删除站点会影响售出的车票！?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        _vm.polistList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    pre: function() {
      this.currentStep -= 1
    },

    // 绘画地图
    drawLine: function(path) {
      var _vm = this
      var jw_path = new Array()
      for (var i = 0; i < path.length; i++) {
        jw_path.push([path[i].lng, path[i].lat])
      }
      _vm.map.plugin('AMap.DragRoute', function() {
        var route = new AMap.DragRoute(_vm.map, jw_path, AMap.DrivingPolicy.LEAST_FEE, { midMarkerOptions: { visible: false },
          startMarkerOptions: { content: '<div></div>' },
          endMarkerOptions: { content: '<div></div>' },
          polyOptions: { strokeColor: '#0092DC', borderWeight: 0, strokeWeight: 4 },
          showTraffic: false
        }) // 构造拖拽导航类
        route.search() // 查询导航路径并开启拖拽导航
        route.on('complete', function(data) {
          _vm.distance = (data.data.routes[0].distance) / 1000
        })//
        for (var i = 0; i < path.length; i++) {
          var icon
          if (i === 0) {
            icon = 'https://qiniu.shulan95.com/qidian.png'
          } else if (i == (path.length - 1)) {
            icon = 'https://qiniu.shulan95.com/zhongdian.png'
          } else {
            if (path[i].type == 0) icon = 'https://qiniu.shulan95.com/zu.png'
            else icon = 'https://qiniu.shulan95.com/zu_1.png'
          }
          _vm.markerAll.push(new AMap.Marker(
            {
              map: _vm.map,
              clickable: true,
              icon: new AMap.Icon({
                image: icon,
                imageSize: new AMap.Size(32, 32)
              }),
              animation: 'AMAP_ANIMATION_DROP',
              title: path[i].name,
              label: {
                offset: new AMap.Pixel(20, 20), // 设置文本标注偏移量
                content: "<div class='stop-info'><p class='markerName'>" + path[i].name + "</p><span class='triangle_border_down'></span></div>", // 设置文本标注内容
                direction: 'top' // 设置文本标注方位
              },
              position: [path[i].lng, path[i].lat],
              extData: path[i]
            }
          ))
        }
        for (var i = 0; i < _vm.markerAll.length; i++) {
          _vm.markerAll[i].on('click', function(e) {
            var data = JSON.parse(JSON.stringify(e.target.getExtData()))
            console.log(data)

            // 得到的数据
          })
        }
      })
    },

    // 获取班次信息
    get_regular_info: function() {
      var that = this
      get_regular_info({ id: that.id }).then(res => {
        if (res.code === 200) {
          const data = res.data

          that.regularList = data
          if (that.regularList.length) that.is_step3 = true
        } else {
          this.$message({ showClose: true, message: res.msg, type: 'error' })
        }
      }).catch(error => {
        this.$message({ showClose: true, message: error, type: 'error' })
      })
    },

    handelClose() {
      this.add_regualr = false
    },
    handelClose1() {
      this.add_point = false
    },
    next() {
      // if (this.currentStep++ > 3) this.currentStep = 0
      if (this.currentStep === 0) {
        if (!this.is_step1) return this.$message({ showClose: true, message: '请先保存基础信息', type: 'error' })
      }

      if (this.currentStep === 1) {
        this.get_regular_info()
        if (!this.is_step2) return this.$message({ showClose: true, message: '请先保存站点信息', type: 'error' })
      }
      if (this.currentStep === 2) {
        if (!this.is_step3) return this.$message({ showClose: true, message: '请先保存班次信息', type: 'error' })
      }

      this.currentStep += 1
    },
    quxiao() {
      history.back(-1)
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.app-container{
  background: #fff;
  margin: 20px;
}
</style>

